<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
	<title>用户注册</title>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=yes">
	<title>UNICORN</title>
	<link type="image/x-icon" href="${ctx}/static/images/favicon.ico" rel="shortcut icon">
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="${ctx}/static/css/font-awesome.css">
	<link rel="stylesheet" href="${ctx}/static/css/base.css">
	<script src="${ctx}/static/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
	<link href="${ctx}/static/jquery-validation/1.11.1/validate.css" type="text/css" rel="stylesheet"/>
	<script src="${ctx}/static/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${ctx}/static/jquery-validation/1.11.1/messages_bs_zh.js" type="text/javascript"></script>
	<style>
		.register {
			position: absolute;
			top: 30%;
			left: 50%;
			width: 400px;
			height: 400px;
			margin: -200px 0 0 -200px;
			padding: 30px;
		}
		.btn {
			display: block;
			width: 100%;
			padding: 8px 20px !important;
			letter-spacing: 1px;
			background-color: #3186c8;
			font-size: 18px;
			color: #000;
		}
		.btn2 {
			background-color: #3186c8;
			color: #000;
			outline: none;
			font-size: 18px;
			letter-spacing: 1px;
			padding: 6px 20px !important;
			-moz-user-select: none;
			background-image: none;
			border: 1px solid transparent;
			border-radius: 4px;
			cursor: pointer;
			display: inline-block;
			font-size: 14px;
			font-weight: normal;
			line-height: 1.42857;
			margin-bottom: 0;
			padding: 2px 12px;
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
		 }
	</style>
	<script>
		$(document).ready(function() {
			//聚焦第一个输入框
			$("#mobile").focus();
			//为inputForm注册validate函数
			$("#inputForm").validate({
				rules: {
					password:{required: true ,minlength: 6},
					code:{required: true ,minlength: 4},
					mobile: {
						required: true, number:true,
						remote: "${ctx}/register/checkMobile"
					}
				},
				messages: {
					password:{
						required:"密码不能为空",
						minlength:"密码长度不能小于6位"
					},
					code:{
						required:"验证码不能为空",
						minlength:"验证码长度不能小于4位"
					},
					mobile: {
						required: "请填写手机号码",
						number:"手机号码只能为数字",
						remote: "用户登录名已存在"
					}
				}
			});
			$("#sendCode_btn").click(function(){
				var mobile = $('#mobile').val();
				var url = "${ctx}/register/sendCode/"+mobile;
				$.getJSON(url,function(data){
					alert(data.message);
				});
			});
		});
	</script>
</head>

<body>
<div id="navbarAffix" class="navbar-static-top" data-spy="affix">
	<div class="container">
		<a class="navbar-brand" href="${ctx}/"></a>
		<ul class="navbar-nav">
			<!--
			<li ><a href="${ctx}/">首页</a></li>

			<shiro:notAuthenticated>
				<li><a href="${ctx}/register">注册</a></li>
				<li><a href="${ctx}/login">登录</a></li>
			</shiro:notAuthenticated>
			-->
			<!--
            <li class="active"><a href="#">移动</a></li>
            <li><a href="#">指南</a></li>
            -->
		</ul>
		<ul class="navbar-nav navbar-nav-right">
			<li>
				<a href="${ctx}/login">登录</a>
			</li>
		</ul>

		<div class="register">
		<form id="inputForm" action="${ctx}/register" method="post" class="form-horizontal">
			<fieldset>
				<div class="form-group">
					<div class="form-item">
						<label for="mobile">手机</label>
						<input type="text" id="mobile" name="mobile" class="form-control input-large required" minlength="11"/>
					</div>
					<div class="form-item">
						<div style="white-space:nowrap;">
							<label for="mobile">验证码</label>
							<input type="text" id="code" name="code" class="form-control input-large required">
							<input id="sendCode_btn" class="btn2" type="button" value="获 取">
						</div>

					</div>

					<div class="form-item">
						<label for="mobile">昵称</label>
						<input type="text" id="nickName" name="nickName" class="form-control input-large required" />
					</div>

					<div class="form-item">
						<label for="mobile">密码</label>
						<input type="password" id="password" name="password" class="form-control input-large required" minlength="6"/>
					</div>
					<div class="form-item">
						<label for="mobile">确认密码</label>
						<input type="password"  id="confirmPassword" name="confirmPassword" class="form-control input-large required" equalTo="#password"/>
					</div>
				</div>
				<div class="form-actions">
					<input id="submit_btn" class="btn" type="submit" value="提 交"/>&nbsp;
				</div>
			</fieldset>
		</form>
		</div>
	</div>
</div>
</body>
</html>
